<template>
  <div class="login">
    <nav-bar>
      <i slot="left" class="iconfont icon-fanhui"></i>
      <div slot="center">登录</div>
    </nav-bar>
    <div class="panel">
      <div class="logo"></div>
      <van-form @submit="login" validate-first scroll-to-error>
        <van-field
          v-model.lazy="user.phone"
          type="tel"
          label="手机号"
          label-align="center"
          name="phone"
          :rules="[phonePattern]"
        ></van-field>
        <van-field
          v-model.lazy="user.password"
          type="password"
          label="密码"
          label-align="center"
          name="password"
          :rules="[passwordPattern]"
        >
        </van-field>
        <div style="padding: 20px">
          <van-button block color="#00bfc0" size="small" hairline>
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import NavBar from '../../components/nav-bar/nav-bar.vue'
import { phonePattern, passwordPattern } from '../../utils'
export default {
  components: { NavBar },
  data() {
    return {
      phonePattern,
      passwordPattern,
      user: {
        phone: '',
        password: ''
      }
    }
  },
  methods: {
    ...mapActions(['login'])
  }
}
</script>

<style scoped lang="less">
.login {
  height: 100vh;
  position: relative;
  z-index: 1;
  background: white;
  overflow: hidden;
  .panel {
    height: calc(100vh - 44px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .logo {
      width: 80%;
      height: 100px;
      background: url('../../assets/img/sea.jpg') no-repeat;
      background-size: 100% 100%;
      margin-bottom: 50px;
    }
  }
}
</style>
